import React from 'react';
import { Row, Col } from 'antd';
import { setting, del } from '../utils/icon';
import * as events from 'src/utils/event/componentEvent';
import { EDGE_TYPE } from 'src/utils/constant';
import './NodeMenu.less';

export default function(props) {
  const { disabled } = props;
  const size = 16;
  function remove() {
    if (props._graph && props._graph.current) {
      const id = props._graph.current._edgeMenu.id;
      const currentEdge = props._graph.current.findById(id);
      const sourceNode = getSourceNode(id);
      const outEdeges = sourceNode.getOutEdges();

      if (outEdeges.length === 2) {
        outEdeges.forEach((it) => {
          const { label, percent, ...config } = it.getModel();
          props._graph.current.update(it, { ...config, label: '', percent: null });
        });
        const { id, edge_type, edge_configs, ...config } = sourceNode.getModel();
        updateNode(id, { edge_type: EDGE_TYPE._CONDITION, ...config, edge_configs: [] });
      }
      props._graph.current.removeItem(currentEdge);
      props._graph.current._edgeMenu.style.display = 'none';
    }
  }

  // 更新node
  function updateNode(id, config) {
    const item = props._graph.current.findById(id);
    props._graph.current.update(item, { ...config });
  }

  function getSourceNode(id) {
    const currentEdge = props._graph.current.findById(id);
    const { source } = currentEdge.getModel();
    return props._graph.current.findById(source);
  }
  function openSetting() {
    if (props._graph && props._graph.current) {
      const id = props._graph.current._edgeMenu.id;
      const sourceNode = getSourceNode(id);
      if (disabled) {
        if (props.graphicMode === 'disabled') {
          events.eventEmitter.emit(events.OPEN_CROSS_NODE, {
            data: {
              ...sourceNode.getModel(),
              sourceNode: sourceNode,
            },
            actionType: 'detail',
            modelTitle: '查看分流条件',
            id: id,
          });
        } else {
          events.eventEmitter.emit(events.OPEN_CROSS_NODE_RESULT, {
            data: {
              ...sourceNode.getModel(),
              sourceNode: sourceNode,
            },
            actionType: 'detail',
            modelTitle: '查看分流条件日志',
            id: id,
          });
        }
      } else {
        events.eventEmitter.emit(events.OPEN_CROSS_NODE, {
          data: {
            ...sourceNode.getModel(),
            sourceNode: sourceNode,
          },
          actionType: 'update',
          modelTitle: '配置分流条件',
        });
      }
    }
  }
  return (
    <>
      <Row gutter={3}>
        <Col>
          <div className='tool-menu'>
            <div className='tool-menu-item edgeSetting' onClick={() => openSetting()}>
              <img src={setting} alt='设置' style={{ width: size + 'px', height: size + 'px' }} />
            </div>
            {!disabled && (
              <div className='tool-menu-item' onClick={() => remove()}>
                <img src={del} alt='删除' style={{ width: size + 'px', height: size + 'px' }} />
              </div>
            )}
          </div>
        </Col>
      </Row>
    </>
  );
}
